<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../Ajs/vue.js"></script>
    <script src="../Ajs/vue.min.js"></script>
</head>
<body>

<div id="box">
    <div>{{msg}}</div>
    使用原生js使字符串反转
    <div>{{msg.split("").reverse().join("")}}</div>
    使用计算属性
    <div>{{reverseMsg}}</div>
    <div>{{reverseMsg}}</div>

</div>

<script>
    /*
    computed 计算属性：
        表达式的计算逻辑可能会比较复杂，使用计算属性可以是模板内容更加简洁

    computed 和 methods 区别
        * 计算属性是基于它们的依赖进行缓存的; 方法不存在缓存
        * 计算属性调用{{fn}}; 方法调用{{fn()}}
        * 计算属性在 值发生改变的时候会触发调用; 方法是在执行它的时候调用
    */
    var vm = new Vue({
        el:"#box",
        data:{
            msg:"hello"
        },
        computed:{
            reverseMsg(){
                console.log('调用多次，但是只执行一次'); //区别
                return this.msg.split("").reverse().join("");
            }
        }
    });
</script>

</body>
</html>
